<template>
	<view class="container">
		<view class="card">
			<uni-list :border="false">
				<uni-list-item title="头像" class="12">
					<template #footer>
						<button open-type="chooseAvatar" class="avatar-wrapper" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="widthFix"></image>
						</button>
					</template>
				</uni-list-item>
				<uni-list-item title="昵称" :rightText="userInfo.nickname" to="/pages/AddNickname/AddNickname">
				</uni-list-item>
				<uni-list-item title="性别" :rightText="genderValue(userInfo.gender)" :show-arrow="true"
					@tap="openPopup('sex')">
				</uni-list-item>
				<uni-list-item title="手机" :rightText="userInfo.mobile">
				</uni-list-item>
			</uni-list>
		</view>
		<button v-if="!isLogin" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button>
		<button v-else class="btn" @click="logoutFn">退出登录</button>
		<!-- <button class="btn">保存</button> -->
		<uni-popup ref="popup" background-color="#112959" borderRadius="30rpx 30rpx 0px 0px">
			<view class="popup-content" v-if="popupType === 'sex'">
				<view class="popup-item" @click="changeSex('0')">男</view>
				<view class="popup-item" @click="changeSex('1')">女</view>
				<view class="popup-cancel" @click="closePopup">取消</view>
			</view>
			<view class="popup-photo-content" v-if="popupType === 'photo'">
				<view class="popup-wx-item" @click="chooseMedia">
					<view class="popup-wx-text">微信头像</view>
					<view></view>
				</view>
				<view class="popup-photo-item" @click="chooseMedia">从相册选择</view>
				<view class="popup-photo-item no-border" @click="takePhoto">
					拍照
				</view>
				<view class="popup-cancel" @click="closePopup">取消</view>
			</view>
		</uni-popup>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		login,
		mySetUserInfo,
		myUserInfo
	} from "@/service/index.ts"
	import {
		logout
	} from "@/service/user.ts"
	import {
		onShow
	} from "@dcloudio/uni-app"
	const isLogin = ref(!!uni.getStorageSync("_TOKEN"))

	const logoutFn = async () => {
		await logout()
		uni.removeStorageSync("_TOKEN")
		userInfo.value = {}
		isLogin.value = false
	}
	const defaultAvatar =
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	const userInfo = ref({
		sex: "",
		photo: "",
		avatar: ""
	})
	const genderValue = (gender) => {
		switch (gender) {
			case "0":
				return "男"
				break;
			case "1":
				return "女"
				break;
			default:
				break;
		}
	}
	const popup = ref(null);
	const popupType = ref('')
	const gotoAddNickname = () => {
		uni.navigateTo({
			url: "/pages/AddNickname/AddNickname"
		})
	}
	const getPhoneNumber = async (e) => {
		const {
			code
		} = await uni.login()
		const {
			encryptedData,
			iv
		} = await uni.getUserInfo()
		const phoneCode = e.detail.code
		const res = await login({
			code,
			encryptedData,
			iv,
			phoneCode
		})

		uni.setStorageSync("_TOKEN", res?.userinfo?.token)
		isLogin.value = true
		getUserInfo()
	}
	const openPopup = (type) => {
		popupType.value = type
		popup.value.open('bottom')
	}
	const closePopup = () => {
		popup.value.close()
	}
	const changeSex = (sex) => {
		setUserInfo({
			field: "gender",
			value: sex
		})
		closePopup()
	}
	const chooseMedia = () => {
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			maxDuration: 30,
			camera: 'back',
			success(res) {
				setUserInfo({
					field: "avatar",
					value: res.tempFiles[0].tempFilePath
				})
			}
		})
	}
	const takePhoto = () => {
		const ctx = uni.createCameraContext();
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				setUserInfo({
					field: "avatar",
					value: res.tempImagePath
				})
			}
		});
	}
	const onChooseAvatar = (e) => {
		const {
			avatarUrl
		} = e.detail
		setUserInfo({
			field: "avatar",
			value: avatarUrl
		})
	}
	const setUserInfo = async (data) => {
		await mySetUserInfo(data)
		getUserInfo()
	}
	const getUserInfo = async () => {
		userInfo.value = await myUserInfo()
	}
	onShow(() => {
		getUserInfo()
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: $body-bc;
		padding: 24rpx;

		.avatar-wrapper {
			background: transparent;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			padding: 0;
		}

		.avatar {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

		.card {
			background: #112959;
			border-radius: 20rpx;
			padding: 0 30rpx;

			::v-deep .uni-list-item {
				background-color: #112959 !important;

			}

			::v-deep .uni-list-item__container {
				padding-left: 0 !important;
				padding-right: 0 !important;

				&:first-of-type {
					line-height: 70rpx;
				}
			}

			::v-deep .uni-list-item__content-title {
				color: $content-color;
				font-size: 30rpx;

			}

			::v-deep .uni-list--border:after {
				background-color: #1D4374;
				;
			}

			::v-deep .uni-icon-wrapper {
				padding-right: 0 !important;
			}

			::v-deep .uniui-arrowright {
				color: $title-color !important;
				font-size: 30rpx;
			}

			::v-deep .uni-list-item__extra-text {
				font-size: 30rpx;
				color: $title-color;
			}
		}

		.btn {
			color: $title-color;
			background: #112959;
			border-radius: 20rpx;
			height: 90rpx;
			margin-top: 62rpx;
		}

		.popup-item {
			line-height: 110rpx;
			text-align: center;
			color: $title-color;
		}

		.popup-wx-item {
			padding: 40rpx 0 30rpx;
			border-bottom: 2rpx solid #1D4374;
			margin: 0 44rpx;

			.popup-wx-text {
				text-align: center;
				color: $title-color;
				margin-bottom: 10rpx;
			}
		}

		.popup-photo-item {
			line-height: 90rpx;
			text-align: center;
			color: $title-color;
			border-bottom: 2rpx solid #1D4374;
			margin: 0 44rpx;

			&.no-border {
				border-bottom: none;
			}
		}

		.popup-cancel {
			line-height: 90rpx;
			text-align: center;
			color: $title-color;
			border-top: 4rpx solid #000;
		}
	}
</style>